<template>
  <section class="audio-box clearfloat">
       <nav><span><i class="el-icon-circle-cross" style="font-size: 20px" v-on:click="closeAudioBox"></i></span></nav>
       <section>
         <div>
           <div>
            <audio controls="controls" :src="url" autoplay="autoplay"  preload="auto" :loop="myLoop">
             {{$t('message.yourBrowserDoesNotSupportH5')}}
            </audio>
            <a href="javascript:;" @click="changeLoop" :title="$t('message.loopPlaying')" :class="{'disable':myLoop}"><i class="el-icon-eleg-icon_refresh"></i></a>
           </div>
           <p>{{$t('message.playing')}}：{{name}}</p>
         </div>
      </section>
  </section>
</template>

<script>
export default {
  data(){
    return{
      myLoop:false
    }
  },
  props:{
     url: {
      type: String,
      required: true
     },
     loop:{
       type: Boolean,
       default: false
     },
     name:{
       type:String,
       default:''
     }
  },
  methods:{
    changeLoop(){
      this.myLoop=!this.myLoop;
    },
    closeAudioBox(){
      this.$emit("closeAudioBox")
    }
  },
  created(){
    // console.log(this.url);
    this.myLoop=this.loop;
  }
}
</script>
<style lang="less" scoped>
 .audio-box{
   position: fixed;
   z-index:9999;
   height:70px;
   background-color: #fff;
   bottom:0;
   box-shadow: 0px 3px 15px 1px #000;
   padding:0 0 10px;
   border-top-right-radius: 12px;
   >nav{
     float:right;
     height:20px;
     line-height: 20px;
     width:20px;
     text-align: center;
     position: relative;
     right: -1px;
     top: -2px;
     span{
       cursor: pointer;
     }
   }
   >section{
     position:relative;
     height:50px;
     top:25px;
     >div{
     width:98%;
     position: absolute;
     top:50%;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     left:0;
     right:0;
     margin:auto;
     a{
      color:#000;
      vertical-align: middle;
     }
     a.disable{
       color:#ccc;
     }
     audio{
       width:e("calc(100% - 30px)");;
       background: none;
       display:inline;
       vertical-align: middle;
     }
     p{
       font-size:14px;
     }
    }
   }
 }
  @media screen and (max-width: 1100px){
    .audio-box{
      // left:180px;
      width:e("calc(100% - 180px)");
    }
  }
  @media screen and (min-width: 1100px){
    .audio-box{
      // left:240px;
      width:e("calc(100% - 240px)");
    }
  }
</style>
